<template>
  <div class="home-page">
    <!-- 左侧主要内容 -->
    <div class="content-left">
      <!-- 存储服务概览 -->
      <StorageOverview />
      
      <!-- 核心功能管理 -->
      <CoreFunctions />
    </div>
    
    <!-- 右侧通知告警和操作日志 -->
    <div class="content-right">
      <!-- 通知告警信息 -->
      <AlertNotifications />
      
      <!-- 操作日志记录 -->
      <OperationLogs />
    </div>
  </div>
</template>

<script setup>
import StorageOverview from './components/StorageOverview.vue'
import CoreFunctions from './components/CoreFunctions.vue'
import AlertNotifications from './components/AlertNotifications.vue'
import OperationLogs from './components/OperationLogs.vue'
</script>

<style scoped>
.home-page {
  display: grid;
  grid-template-columns: 1fr 30%;
  gap: 24px;
  padding: 2em 4em;
  min-height: calc(100vh - 48px);
  background: #0C121C;
  grid-template-rows: auto 1fr;
}

.content-left {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 24px;
  opacity: 1;
  border-radius: 10px;
  background: #FFFFFF0C;
  margin-right: 1.4em;
}

.content-right {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 24px;
}
</style>